<template>
    <div class="ma-content-block lg:flex justify-between">
        <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
            <template #tableSearch v-if="route?.query?.type=='user'">
                <a-col :span="6">
                    <a-form-item field="keyword" label="关键词" >
                        <a-input allow-clear v-model="searchForm.keyword" placeholder="请输入" @keydown.enter="refresh" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item field="admin_id" label="管理员">
                        <a-select v-model="searchForm.admin_id" placeholder="请选择"
                            :allow-clear="true" @change="refresh">
                            <a-option v-for="item of userList" :value="item.id" :label="item.true_name" />
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="date" label="日期">
                        <a-range-picker  format="YYYY-MM-DD" v-model="searchForm.date"  @change="refresh" />
                    </a-form-item>
                </a-col>
            </template>
        </sa-table>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, onBeforeMount, watch, nextTick } from 'vue'
import systemApi from '@/api/system/system'
import { useRouter, useRoute } from 'vue-router'
import SaTable from '@cps/sa-table/index.vue'
const route=useRoute()
const crudRef = ref()
const options = reactive({
    api: systemApi.getOpLog,//表格数据接口
    showSearch:false,
    columnAlign:'center',
    operationColumn:false,
    singleLine:true
})
const searchForm = ref({
    keyword: '',
    admin_id:'',
    date:[]
})
const columns = reactive([
    { title: 'ID', dataIndex: 'id', align: 'center', width: 80 },
    { title: '操作人', dataIndex: 'admin_name', align: 'center' },
    { title: 'IP地址', dataIndex: 'ip', align: 'center' },
    { title: '操作', dataIndex: 'msg', align: 'center',width:200 },
    { title: '接口路径', dataIndex: 'param.s', align: 'center',width:200 },
    { title: '请求参数', dataIndex: 'param', align: 'center' },
    { title: '操作时间', dataIndex: 'create_time', align: 'center' },
])
const initPage = async () => { }
const resetSearch=()=>{
    searchForm.value.date = []
}
const refresh = async () => {
    crudRef.value?.refresh()
}
const userList =ref([])
const getAlluser=async()=>{
    const {data} =await systemApi.getUser({page:1,limit:100000})
    userList.value =data.data
}

onBeforeMount(()=>{
    if(route?.query?.type){
        getAlluser()
        options.api=systemApi.getAllOpLog
        options.showSearch=true
    }else{
        options.api= systemApi.getOpLog
        options.showSearch=false
    }
})
onMounted(async () => {
    initPage()
    refresh()
})
</script>

<style scoped>
</style>